<template>
  <div class='user_content'>
    <el-transfer style="text-align: left; display: inline-block" :data="userList" v-model="inGroupUsers" filterable filter-placeholder='请输入用户名' :titles="['未加入用户', '已添加用户']" :format="{noChecked: '${total}',hasChecked: '${checked}/${total}'}" :button-texts="['移除', '添加']" @change="handleChange" :props="{key: 'userId',label: 'loginId'}" :filter-method="filterMethod">

      <span slot-scope="{ option }" :title="option.name+option.loginId">
        {{ option.name }}({{ option.loginId }})
      </span>
    </el-transfer>
    <!-- 用户导入对话框 -->
    <el-dialog v-dialogDrag :title="title" :visible.sync="open" width="400px" append-to-body :close-on-click-modal='false' :close-on-press-escape='false'>

      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import {
  GroupList,
  GroupUserList,
  moveInUser,
  moveOutUser,
} from "@/api/system/userGroup";
export default {
  data() {
    return {
      //对话框标题
      title: "",
      //对话框状态
      open: false,
      //对话框表单
      form: {},
      //全部 人员
      userList: [],
      //已在用户组的人员
      inGroupUsers: [],
      //选中的用户
      checkedUserIds: [],
    };
  },

  components: {},

  computed: {
    ...mapState({
      siteRow: (state) => state.column.siteRow,
      userGroupRow: (state) => state.column.userGroupRow,
    }),
  },

  mounted() {},

  watch: {
    value: {
      handler(val) {},
      deep: true,
      immediate: true,
    },
  },

  methods: {
    handleChange(value, direction, movedKeys) {
      this.checkedUserIds = movedKeys;
      if (direction == "right") {
        //移入用户
        this.handleInUser();
      } else if (direction == "left") {
        //移除用户
        this.handleOutUser();
      }
    },
    //点击用户组行   获取用户组用户tab
    haldleClickColumn() {
      GroupUserList({
        siteId: this.siteRow.siteId,
        groupId: this.userGroupRow.groupId,
      }).then((res) => {
        this.userList = res.data.inGroupUsers.concat(res.data.notInGroupUsers);
        this.inGroupUsers = res.data.inGroupUsers.map((item) => {
          return item.userId;
        });
      });
    },
    //移入用户
    handleInUser() {
      moveInUser({
        groupId: this.userGroupRow.groupId,
        siteId: this.siteRow.siteId,
        userIds: this.checkedUserIds.join(","),
      }).then((res) => {});
    },
    //移除用户
    handleOutUser() {
      moveOutUser({
        groupId: this.userGroupRow.groupId,
        siteId: this.siteRow.siteId,
        userIds: this.checkedUserIds.join(","),
      }).then((res) => {});
    },
    // 用户组查询
    filterMethod(query, item) {
      const label = item.loginId || item.userId.toString();
      return (
        item.loginId.toLowerCase().indexOf(query.toLowerCase()) > -1 ||
        item.name.toLowerCase().indexOf(query.toLowerCase()) > -1
      );
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.form = row;
      this.open = true;
      this.title = "修改用户";
    },

    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.userId != undefined) {
            updateUser(this.form).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addUser(this.form).then((response) => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    // 表单重置
    reset() {
      this.form = {
        userId: undefined,
        userName: undefined,
        nickName: undefined,
        password: undefined,
        phonenumber: undefined,
        email: undefined,
        sex: undefined,
        status: "0",
        remark: undefined,
        postIds: [],
        roleIds: [],
      };
      this.resetForm("form");
    },
  },
};
</script>

<style scoped lang='scss'>
.user_content {
  // padding: 20px;
  height: 100%;
  box-sizing: border-box;
}
.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
}
::v-deep .el-transfer {
  height: 100%;
  display: flex !important;
  justify-content: space-around;
  align-items: center;
  .el-transfer__buttons {
    // width: 250px;
    display: flex;
    flex-direction: column;
    padding: 0 10px;
    .el-button {
      margin-left: 0;
    }
  }
  .el-transfer-panel {
    flex: 1;
    height: 100%;
    width: 0;
    .el-transfer-panel__body {
      height: calc(100% - 40px);
      display: flex;
      flex-direction: column;
      .el-checkbox-group.el-transfer-panel__list {
        flex: 1;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: flex-start;
        .el-transfer-panel__item {
          min-width: 50%;
          max-width: 50%;
          margin-right: 0;
        }
      }
    }
  }
}
@media screen and (max-width: 1440px) {
  /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  ::v-deep .el-transfer-panel__item {
    width: 100% !important ;
    min-width: 100% !important ;
    max-width: 100% !important ;
  }
}
</style>
